<script setup>
import {Refresh, Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {findByDept, findDeptTree} from "@/apis/index.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  visible: Boolean,
})

const emit = defineEmits(['close', 'confirm'])

const treeRef = ref(null) // 树形组件
const filterText = ref('') // 过滤输入框
const treeData = ref([]) // 树形数据
const dataTime = ref([]) // 日期数组
const tableData = ref([])   // 表格数据
const pageSizes = [2, 5, 8, 10] // 分页大小
const pageResult = ref({}) // 表格分页数据

const selectUser=ref()

// 查询参数
const params = ref({
  currentPage: 1,
  pageSize: 5,
  username: '',
  phone: '',
  status: '',
  startTime: '',
  endTime: '',
  deptId: ''
})

onMounted(async () => {
  treeData.value = await findDeptTree() // 获取部门树数据
  pageResult.value = await findByDept(params.value) // 获取分页数据
  tableData.value = pageResult.value.records // 获取表格数据
  console.log(treeData.value)
})

//属性的映射关系
const defaultProps = {
  children: 'children',
  label: 'deptName',
  value: 'deptId'
}
// 过滤字段
const filterNode = (value, data) => {
  if (!value) return true
  return (data.deptName || '').includes(value)
}
/**
 * 处理点击树形查询数据
 * @param data 树形数据
 * @param node
 * @param vnode
 * @param event
 */
const handleNodeClick = async (data, node, vnode, event) => {
  params.value.deptId = node.data.deptId
  await handleSearch()
}
// 参数搜索查询数据
const handleSearch = async () => {
  // console.log(params.value)
  pageResult.value = await findByDept(params.value)
  tableData.value = pageResult.value.records
}
/**
 * 用户确认选定的值时触发
 * @param val 日期数组
 */
const handleDateChange = (val) => {
  if (val) {
    params.value.startTime = val[0]
    params.value.endTime = val[1]
  } else {
    // 清空参数中的日期
    params.value.startTime = ''
    params.value.endTime = ''
  }
}

// 重置参数
function resetField() {
  params.value = {
    currentPage: 1,
    pageSize: 2,
    username: '',
    phone: '',
    status: '',
    startTime: '',
    endTime: '',
    deptId: ''
  }
  //重置时间参数
  dataTime.value = []
  handleSearch() // 数据刷新
}

/**
 * 处理选中行变化
 * @param val 选中行的数组
 */
const handleSelectionChange = (val) => {
  selectUser.value=null
  selectUser.value=val
}

/**
 * 处理当前页码变化
 * @param currentPage 当前页码
 */
const handleCurrentChange = (currentPage) => {
  params.value.currentPage = currentPage
  handleSearch() // 数据刷新
}
/**
 * 处理分页大小变化
 * @param size 分页大小
 */
const handleSizeChange = (size) => {
  params.value.pageSize = size
  handleSearch() // 数据刷新
}
const handleClose = () => {
  emit('close')
}
const handleConfirm=()=>{
  console.log(selectUser.value)
  if (selectUser.value==null) {
    ElMessage.error("请选择数据")
    return;
  }else {
    emit('confirm', selectUser.value)
    handleClose()
  }

}

</script>

<template>
  <el-dialog v-model="props.visible" title="用户管理" width="70%" :before-close="handleClose" align-center append-to-body>
    <div>
      <el-row :gutter="20">
        <!-- 树形数据展示 -->
        <el-col :span="4">
          <el-row class="tree-row">
            <el-col :span="24">
              <el-input v-model="filterText" :prefix-icon="Search" clearable placeholder="请输入部门名称"/>
              <el-tree ref="treeRef" class="filter-tree" :data="treeData" :props="defaultProps"
                       default-expand-all node-key="deptId" :filter-node-method="filterNode"
                       @node-click="handleNodeClick"/>
            </el-col>
          </el-row>
        </el-col>
        <!-- 主体内容展示 -->
        <el-col :span="20">
          <!-- 搜索参数组件 -->
          <el-form :model="params">
            <el-row :gutter="20">
              <el-col :span="7">
                <el-form-item label="用户名称" class="bold-label">
                  <el-input v-model="params.username" placeholder="请输入用户名称" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="手机号码" class="bold-label">
                  <el-input v-model="params.phone" placeholder="请输入手机号码" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="状态" class="bold-label">
                  <el-select v-model="params.status" placeholder="用户状态">
                    <el-option label="启用" value="0"></el-option>
                    <el-option label="禁用" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="9">
                <el-form-item label="创建时间" class="bold-label">
                  <el-date-picker v-model="dataTime" value-format="YYYY-MM-DD" type="datetimerange"
                                  start-placeholder="开始时间" end-placeholder="结束时间" @change="handleDateChange"/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button :icon="Refresh" @click="resetField">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
          <!-- 搜索参数组件结束 -->
          <!-- 表格组件 -->
          <el-row>
            <el-table :data="tableData" style="width: 100%" @current-change="handleSelectionChange" highlight-current-row>
              <el-table-column align="center" label="用户编号" property="userId"/>
              <el-table-column align="center" property="userName" label="用户名称"/>
              <el-table-column align="center" property="nickName" label="用户昵称"/>
              <el-table-column align="center" property="dept.deptName" label="部门" width="200"/>
              <el-table-column align="center" property="phone" label="手机号码" width="120"/>
              <el-table-column align="center" property="createTime" label="创建时间" width="200"/>
            </el-table>
          </el-row>
          <!-- 表格组件结束 -->
          <!-- 分页组件 -->
          <el-row>
            <el-col :span="24">
              <div class="demo-pagination-block">
                <el-pagination v-model:current-page="params.currentPage" v-model:page-size="params.pageSize"
                               background :default-page-size="params.pageSize" :page-sizes="pageSizes"
                               layout="total,sizes,prev,pager,next,jumper" :total="parseInt(pageResult.total)"
                               @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
          <!-- 分页组件结束 -->
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.demo-pagination-block{
  margin-top: 20px;
  float: right;
}
.dialog-footer{
  text-align: center;
}
</style>